<template>
    <div class="photoinfo-container">
       <h3>{{photoinfo.title}}</h3>
    <p class="subtitle">
        <span>发布时间：{{photoinfo.add_time}}</span>
        <span>点击：{{photoinfo.click}}</span>
    </p>
    <hr>
    <!--缩略图-->
    <div class="thumbs">
        <vue-preview :slides="list" @close="handleClose"></vue-preview>
    </div>
    <!--内容-->
    <div class="content" v-html="photoinfo.content"></div>
    </div>
</template>

<script>
    export default {
      data(){
          return{
              id:this.$route.params.id,
              photoinfo:[],
              list:[]
          }
      },
        created() {
          this.getPhotoInfo();
          this.handleClose();
        },
        methods:{
            getPhotoInfo(){
                this.$http.get('photo/getimageInfo',{params:{id:this.id}}).then(result =>{
                    if (result.data.status === 0){
                        this.photoinfo = result.data.message[0]
                    }else {
                        this.$toast('加载失败')
                    }
                })
            },
            handleClose(){
                this.$http.get('photo/getthumimages',{params:{id:this.id}}).then(result =>{
                    if (result.data.status === 0){
                        result.data.message.forEach(item =>{
                            item.w=600;
                            item.h=400;
                            item.msrc = item.src;
                        });
                        this.list = result.data.message
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    .photoinfo-container {
        padding: 3px;
        h3 {
            color: #26a2ff;
            font-size: 15px;
            text-align: center;
            margin: 15px 0;
        }
        .subtitle {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
        }
        .content {
            font-size: 13px;
            line-height: 30px;
        }
        .thumbs {
            .my-gallery {
                width: 100%;
                display: flex;
                flex-flow: row wrap;
            }
            figure {
                margin: 0.2em;
            }
            img {
                width: 5.6em;
                box-shadow: 0 0 8px #999;
            }
        }
    }
</style>
